<template>
  <div class="word-details">
    <el-card class="word-card">
      <template #header>
        <div class="word-header">
          <h3>{{ word.word }}</h3>
          <el-tag v-if="word.ielst === 'YES'" type="success">雅思词汇</el-tag>
          <el-tag v-if="word.ok === 'YES'" type="warning">已掌握</el-tag>
        </div>
      </template>

      <div class="word-info">
        <p v-if="word.phonetic"><strong>音标:</strong> {{ word.phonetic }}</p>
        <p v-if="word.pronounce"><strong>发音:</strong> {{ word.pronounce }}</p>

        <div v-if="hasPronunciation" class="pronunciation-controls">
          <slot name="pronunciation-controls"></slot>
        </div>

        <audio v-if="hasAudio" ref="pronunciationAudio" @ended="onAudioEnded" @error="onAudioError"></audio>

        <p v-if="word.trans"><strong>翻译:</strong> {{ word.trans }}</p>

        <div class="word-actions">
          <slot name="actions"></slot>
        </div>
      </div>
    </el-card>

    <div v-if="hasDefinitions && word.definitions.length > 0" class="definitions">
      <h4>释义</h4>
      <el-table :data="word.definitions" style="width: 100%" :show-header="false">
        <el-table-column prop="part_of_speech" label="词性" width="100" />
        <el-table-column prop="definition" label="释义" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WordDetails',
  props: {
    word: {
      type: Object,
      required: true,
    },
  },
  computed: {
    hasPronunciation() {
      return this.word.uk_speech || this.word.us_speech;
    },
    hasAudio() {
      return !!this.$refs.pronunciationAudio;
    },
    hasDefinitions() {
      return this.word.definitions && Array.isArray(this.word.definitions);
    },
  },
  methods: {
    onAudioEnded() {
      this.$emit('audio-ended');
    },
    onAudioError(err) {
      this.$emit('audio-error', err);
    },
  },
};
</script>

<style scoped>
.word-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.word-header h3 {
  margin: 0;
}

.pronunciation-controls {
  margin: 15px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.definitions {
  margin-top: 20px;
}

.definitions h4 {
  margin-bottom: 10px;
  color: #333;
}
</style>
